<!DOCTYPE html>
<!-- saved from url=(0090)https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html -->
<html lang="zh-tw"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>CSS定位方式 | 前端工程师手册</title>
        
        <meta name="description" content="">
        <meta name="generator" content="GitBook 2.1.0">
        <meta name="author" content="Leo Hui">
        
        <meta name="HandheldFriendly" content="true">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="https://leohxj.gitbooks.io/front-end-database/content/gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="https://leohxj.gitbooks.io/front-end-database/content/gitbook/images/favicon.ico" type="image/x-icon">
        
    <link rel="stylesheet" href="./CSS定位方式_files/style.css">
    
    

        
    
    
    <link rel="next" href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-float.html">
    
    
    <link rel="prev" href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-normal-flow.html">
    

        
    </head>
    <body>
        
        
    <div class="book without-animation with-summary font-size-2 font-family-1" data-level="1.9" data-basepath=".." data-revision="Sat Jul 18 2015 06:35:05 GMT+0000 (UTC)">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="輸入並搜尋" class="form-control">
    </div>
    <ul class="summary">
        
        
        
            
            <li>
                <a href="https://www.gitbook.com/book/leohxj/front-end-database" target="blank" class="custom-link">前端工程师手册</a>
            </li>
        
        

        
        <li class="divider"></li>
        

        
    
        <li class="chapter  done" data-level="0" data-path="index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/index.html">
                        <i class="fa fa-check"></i>
                        
                        介紹
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="1" data-path="html-and-css-basic/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.</b>
                        
                        HTML/CSS基础
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="1.1" data-path="html-and-css-basic/common-tag.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/common-tag.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.1.</b>
                        
                        HTML常用标签
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="1.2" data-path="html-and-css-basic/semantic-html.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/semantic-html.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.2.</b>
                        
                        HTML语义化
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="1.3" data-path="html-and-css-basic/doctype-and-brower-render.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/doctype-and-brower-render.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.3.</b>
                        
                        DOCTYPE和浏览器渲染模式
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="1.4" data-path="html-and-css-basic/learn-dom-tree.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/learn-dom-tree.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.4.</b>
                        
                        理解DOM结构
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="1.5" data-path="html-and-css-basic/what-is-html5.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/what-is-html5.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.5.</b>
                        
                        HTML5新增内容
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="1.6" data-path="html-and-css-basic/common-use-css-property.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/common-use-css-property.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.6.</b>
                        
                        常用CSS属性
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="1.7" data-path="html-and-css-basic/box-module.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/box-module.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.7.</b>
                        
                        盒模型
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="1.8" data-path="html-and-css-basic/css-normal-flow.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-normal-flow.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.8.</b>
                        
                        CSS普通流（文档流）
                    </a>
                
            
            
        </li>
    
        <li class="chapter active" data-level="1.9" data-path="html-and-css-basic/css-position.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.9.</b>
                        
                        CSS定位方式
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="1.10" data-path="html-and-css-basic/css-float.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-float.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.10.</b>
                        
                        CSS浮动相关
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="1.11" data-path="html-and-css-basic/css-selector.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-selector.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.11.</b>
                        
                        CSS选择器
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="1.12" data-path="html-and-css-basic/css-layout.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-layout.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.12.</b>
                        
                        CSS常见布局
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="1.13" data-path="html-and-css-basic/css-write-and-name.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-write-and-name.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.13.</b>
                        
                        CSS书写与命名
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="1.14" data-path="html-and-css-basic/css3-news.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css3-news.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.14.</b>
                        
                        CSS3新增特性
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="1.15" data-path="html-and-css-basic/meta.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/meta.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.15.</b>
                        
                        常用meta整理
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="1.16" data-path="html-and-css-basic/meta-viewport.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/meta-viewport.html">
                        <i class="fa fa-check"></i>
                        
                            <b>1.16.</b>
                        
                        什么是Viewport
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter  done" data-level="2" data-path="html-and-css-advance/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-advance/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.</b>
                        
                        HTML/CSS进阶
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="2.1" data-path="html-and-css-advance/custom-fonts.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-advance/custom-fonts.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.1.</b>
                        
                        自定义字体
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="2.2" data-path="html-and-css-advance/css-baseline.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-advance/css-baseline.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.2.</b>
                        
                        CSS基线
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="2.3" data-path="html-and-css-advance/css-animations.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-advance/css-animations.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.3.</b>
                        
                        CSS动画
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="2.4" data-path="html-and-css-advance/ui-framework.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-advance/ui-framework.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.4.</b>
                        
                        前端UI框架
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="2.5" data-path="html-and-css-advance/framework-bootstrap.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-advance/framework-bootstrap.html">
                        <i class="fa fa-check"></i>
                        
                            <b>2.5.</b>
                        
                        Bootstrap学习指南
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="3" data-path="javascript-basic/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.</b>
                        
                        JavaScript基础
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="3.1" data-path="javascript-basic/scoping-and-hoisting.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/scoping-and-hoisting.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.1.</b>
                        
                        作用域问题
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.2" data-path="javascript-basic/operate-priority.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/operate-priority.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.2.</b>
                        
                        运算符的优先级
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.3" data-path="javascript-basic/variable-object.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/variable-object.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.3.</b>
                        
                        变量对象
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.4" data-path="javascript-basic/difference-between-undefined-and-null.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/difference-between-undefined-and-null.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.4.</b>
                        
                        undefined与null的区别
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.5" data-path="javascript-basic/build-in-and-native-object.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/build-in-and-native-object.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.5.</b>
                        
                        内置对象与原生对象
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.6" data-path="javascript-basic/function.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/function.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.6.</b>
                        
                        关于函数
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.7" data-path="javascript-basic/immediately-invoked-function-expression.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/immediately-invoked-function-expression.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.7.</b>
                        
                        立即执行函数
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.8" data-path="javascript-basic/closure.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/closure.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.8.</b>
                        
                        闭包
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.9" data-path="javascript-basic/events.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/events.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.9.</b>
                        
                        事件机制
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.10" data-path="javascript-basic/prototypal-inheritance.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/prototypal-inheritance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.10.</b>
                        
                        原型继承
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.11" data-path="javascript-basic/all-this.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/all-this.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.11.</b>
                        
                        详解this
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.12" data-path="javascript-basic/everthing-is-object.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/everthing-is-object.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.12.</b>
                        
                        在JavaScript中一切都是对象吗？
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.13" data-path="javascript-basic/deal-with-dom.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/deal-with-dom.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.13.</b>
                        
                        DOM操作
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="3.14" data-path="javascript-basic/json.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/json.html">
                        <i class="fa fa-check"></i>
                        
                            <b>3.14.</b>
                        
                        JSON对象
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="4" data-path="javascript-advance/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-advance/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.</b>
                        
                        JavaScript进阶
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="4.1" data-path="javascript-advance/scope-chain.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-advance/scope-chain.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.1.</b>
                        
                        理解作用域链
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="4.2" data-path="javascript-advance/callback.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-advance/callback.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.2.</b>
                        
                        Callback问题
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="4.3" data-path="javascript-advance/promise.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-advance/promise.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.3.</b>
                        
                        Promise
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="4.4" data-path="javascript-advance/template-engine.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-advance/template-engine.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.4.</b>
                        
                        模板引擎
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="4.5" data-path="javascript-advance/underscore.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-advance/underscore.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.5.</b>
                        
                        Underscore
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="4.6" data-path="javascript-advance/es6.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-advance/es6.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.6.</b>
                        
                        ES6
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="4.7" data-path="javascript-advance/base64-code-and-decode.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-advance/base64-code-and-decode.html">
                        <i class="fa fa-check"></i>
                        
                            <b>4.7.</b>
                        
                        Base64编码与解码
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="5" data-path="javascript-oop/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-oop/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>5.</b>
                        
                        JavaScript面向对象
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="5.1" data-path="javascript-oop/encapsulation.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-oop/encapsulation.html">
                        <i class="fa fa-check"></i>
                        
                            <b>5.1.</b>
                        
                        封装
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="5.2" data-path="javascript-oop/inheritance.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-oop/inheritance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>5.2.</b>
                        
                        继承
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="6" data-path="javascript-design-pattern/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-design-pattern/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>6.</b>
                        
                        JavaScript设计模式
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="6.1" data-path="javascript-design-pattern/singleton.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-design-pattern/singleton.html">
                        <i class="fa fa-check"></i>
                        
                            <b>6.1.</b>
                        
                        单例模式: Singleton
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="7" data-path="javascript-library/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-library/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>7.</b>
                        
                        编写JavaScript框架
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="7.1" data-path="javascript-library/library-framework.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-library/library-framework.html">
                        <i class="fa fa-check"></i>
                        
                            <b>7.1.</b>
                        
                        框架结构
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="8" data-path="javascript-modules/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-modules/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.</b>
                        
                        JavaScript模块管理
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="8.1" data-path="javascript-modules/modules-intro.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-modules/modules-intro.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.1.</b>
                        
                        模块化简介
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="8.2" data-path="javascript-modules/modules-tools-compare.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-modules/modules-tools-compare.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.2.</b>
                        
                        模块依赖管理工具对比
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="8.3" data-path="javascript-modules/about-amd.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-modules/about-amd.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.3.</b>
                        
                        AMD
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="8.4" data-path="javascript-modules/about-umd.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-modules/about-umd.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.4.</b>
                        
                        UMD
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="8.5" data-path="javascript-modules/requirejs/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-modules/requirejs/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.5.</b>
                        
                        requireJS
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="8.5.1" data-path="javascript-modules/requirejs/requirejs-intro.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-modules/requirejs/requirejs-intro.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.5.1.</b>
                        
                        入门使用
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="8.5.2" data-path="javascript-modules/requirejs/requirejs-optimizer.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-modules/requirejs/requirejs-optimizer.html">
                        <i class="fa fa-check"></i>
                        
                            <b>8.5.2.</b>
                        
                        压缩优化
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="9" data-path="javascript-data-struct/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-data-struct/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>9.</b>
                        
                        JavaScript数据结构
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="9.1" data-path="javascript-data-struct/type.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-data-struct/type.html">
                        <i class="fa fa-check"></i>
                        
                            <b>9.1.</b>
                        
                        数据类型
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="10" data-path="javascript-asynchronous/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.</b>
                        
                        JavaScript异步编程
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="10.1" data-path="javascript-asynchronous/Asynchronous-Programming-Model.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/Asynchronous-Programming-Model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.1.</b>
                        
                        常见的异步模式
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="10.2" data-path="javascript-asynchronous/what-is-promise.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/what-is-promise.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.2.</b>
                        
                        什么是Promise
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="10.3" data-path="javascript-asynchronous/promise-standard.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/promise-standard.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.3.</b>
                        
                        Promise规范
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="10.4" data-path="javascript-asynchronous/use-promise.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/use-promise.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.4.</b>
                        
                        Promise实战
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="10.5" data-path="javascript-asynchronous/use-async.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/use-async.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.5.</b>
                        
                        Async控制异步流程
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="10.6" data-path="javascript-asynchronous/use-eventproxy.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/use-eventproxy.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.6.</b>
                        
                        EventProxy控制异步流程
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="10.7" data-path="javascript-asynchronous/use-JSDeferred.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-asynchronous/use-JSDeferred.html">
                        <i class="fa fa-check"></i>
                        
                            <b>10.7.</b>
                        
                        JSDeferred控制异步流程
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="11" data-path="javascript-regular-expressions/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-regular-expressions/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>11.</b>
                        
                        JavaScript正则表达式
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="11.1" data-path="javascript-regular-expressions/grammar.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-regular-expressions/grammar.html">
                        <i class="fa fa-check"></i>
                        
                            <b>11.1.</b>
                        
                        基本语法
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="11.2" data-path="javascript-regular-expressions/practical-examples.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-regular-expressions/practical-examples.html">
                        <i class="fa fa-check"></i>
                        
                            <b>11.2.</b>
                        
                        实用案例
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="12" data-path="jQuery/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/jQuery/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.</b>
                        
                        jQuery相关
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="12.1" data-path="jQuery/attach-and-remove-handler.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/jQuery/attach-and-remove-handler.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.1.</b>
                        
                        jQuery事件注册和取消
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="12.2" data-path="jQuery/get-dom-index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/jQuery/get-dom-index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.2.</b>
                        
                        获取元素在DOM中的顺序
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="12.3" data-path="jQuery/deferred-object.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/jQuery/deferred-object.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.3.</b>
                        
                        Deferred对象
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="12.4" data-path="jQuery/writing-better-jquery-code.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/jQuery/writing-better-jquery-code.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.4.</b>
                        
                        jQuery代码技巧
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="12.5" data-path="jQuery/jQuery-source-code/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/jQuery/jQuery-source-code/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.5.</b>
                        
                        jQuery源码分析
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="12.5.1" data-path="jQuery/jQuery-source-code/code-build.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/jQuery/jQuery-source-code/code-build.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.5.1.</b>
                        
                        源码构建
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="12.5.2" data-path="jQuery/jQuery-source-code/architecture.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/jQuery/jQuery-source-code/architecture.html">
                        <i class="fa fa-check"></i>
                        
                            <b>12.5.2.</b>
                        
                        理解架构
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="13" data-path="GSAP/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/GSAP/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>13.</b>
                        
                        GSAP相关
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="13.1" data-path="GSAP/fqa.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/GSAP/fqa.html">
                        <i class="fa fa-check"></i>
                        
                            <b>13.1.</b>
                        
                        常见问题
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="14" data-path="network/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/network/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>14.</b>
                        
                        网络相关
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="14.1" data-path="network/http-status-code.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/network/http-status-code.html">
                        <i class="fa fa-check"></i>
                        
                            <b>14.1.</b>
                        
                        常见HTTP状态码
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="14.2" data-path="network/web-cache.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/network/web-cache.html">
                        <i class="fa fa-check"></i>
                        
                            <b>14.2.</b>
                        
                        web缓存机制
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="14.3" data-path="network/404-page.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/network/404-page.html">
                        <i class="fa fa-check"></i>
                        
                            <b>14.3.</b>
                        
                        404页面
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="15" data-path="cross-domain/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/cross-domain/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>15.</b>
                        
                        跨域问题
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="15.1" data-path="cross-domain/same-origin-policy.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/cross-domain/same-origin-policy.html">
                        <i class="fa fa-check"></i>
                        
                            <b>15.1.</b>
                        
                        同源策略
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="15.2" data-path="cross-domain/iframe-resize.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/cross-domain/iframe-resize.html">
                        <i class="fa fa-check"></i>
                        
                            <b>15.2.</b>
                        
                        iframe自适应
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="15.3" data-path="cross-domain/solution-web-service.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/cross-domain/solution-web-service.html">
                        <i class="fa fa-check"></i>
                        
                            <b>15.3.</b>
                        
                        WebService解决方案
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="15.4" data-path="cross-domain/solutions-jsonp.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/cross-domain/solutions-jsonp.html">
                        <i class="fa fa-check"></i>
                        
                            <b>15.4.</b>
                        
                        JSONP
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="16" data-path="about-test/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/about-test/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>16.</b>
                        
                        调试与测试
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="16.1" data-path="about-test/blackbox.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/about-test/blackbox.html">
                        <i class="fa fa-check"></i>
                        
                            <b>16.1.</b>
                        
                        Blackbox
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="16.2" data-path="about-test/mocha.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/about-test/mocha.html">
                        <i class="fa fa-check"></i>
                        
                            <b>16.2.</b>
                        
                        Mocha测试框架
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="17" data-path="frontend-workflow/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.</b>
                        
                        前端自动化
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="17.1" data-path="frontend-workflow/direction-organization.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/direction-organization.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.1.</b>
                        
                        项目目录组织
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="17.2" data-path="frontend-workflow/process.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/process.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.2.</b>
                        
                        自动化流程
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="17.3" data-path="frontend-workflow/yeoman.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/yeoman.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.3.</b>
                        
                        yeoman
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="17.4" data-path="frontend-workflow/yo.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/yo.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.4.</b>
                        
                        yo
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="17.5" data-path="frontend-workflow/bower.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/bower.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.5.</b>
                        
                        bower
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="17.6" data-path="frontend-workflow/gulp.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/gulp.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.6.</b>
                        
                        gulp
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="17.7" data-path="frontend-workflow/gulp-plugins.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/gulp-plugins.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.7.</b>
                        
                        gulp插件选择
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="17.8" data-path="frontend-workflow/yeoman-example.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/frontend-workflow/yeoman-example.html">
                        <i class="fa fa-check"></i>
                        
                            <b>17.8.</b>
                        
                        yeoman参考案例
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="18" data-path="sap/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/sap/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.</b>
                        
                        SPA
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="18.1" data-path="sap/what-is-sap.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/sap/what-is-sap.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.1.</b>
                        
                        什么是SPA
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="18.2" data-path="sap/sap-seo.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/sap/sap-seo.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.2.</b>
                        
                        单页面SEO解决方案
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="18.3" data-path="sap/sap-without-framework.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/sap/sap-without-framework.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.3.</b>
                        
                        开发无框架单页面应用
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="18.4" data-path="sap/isomorphic.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/sap/isomorphic.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.4.</b>
                        
                        可伸缩的同构Javascript代码
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="18.5" data-path="sap/pjax.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/sap/pjax.html">
                        <i class="fa fa-check"></i>
                        
                            <b>18.5.</b>
                        
                        PJAX
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="19" data-path="architecture-of-f2d/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/architecture-of-f2d/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>19.</b>
                        
                        理解架构
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="20" data-path="midway/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/midway/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>20.</b>
                        
                        前后端分离
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="20.1" data-path="midway/simple-way.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/midway/simple-way.html">
                        <i class="fa fa-check"></i>
                        
                            <b>20.1.</b>
                        
                        一个简单粗暴的前后端分离方案
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="21" data-path="user-interface/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.</b>
                        
                        UI
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="21.1" data-path="user-interface/about-retina.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/about-retina.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.1.</b>
                        
                        关于Retina
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="21.2" data-path="user-interface/responsive-images.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/responsive-images.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.2.</b>
                        
                        响应式图片
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="21.3" data-path="user-interface/responsive-fonts.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/responsive-fonts.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.3.</b>
                        
                        响应式字体
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="21.4" data-path="user-interface/chinese-fonts.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/chinese-fonts.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.4.</b>
                        
                        中文字体
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="21.5" data-path="user-interface/mobile-fonts.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/mobile-fonts.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.5.</b>
                        
                        移动端字体
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="21.6" data-path="user-interface/responsive-principle.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/responsive-principle.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.6.</b>
                        
                        响应式设计原则
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="21.7" data-path="user-interface/chinese-layout.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/chinese-layout.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.7.</b>
                        
                        中文排版的规范
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="21.8" data-path="user-interface/size-knowledge.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-interface/size-knowledge.html">
                        <i class="fa fa-check"></i>
                        
                            <b>21.8.</b>
                        
                        移动端尺寸
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="22" data-path="user-experience/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-experience/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>22.</b>
                        
                        UX
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="22.1" data-path="user-experience/fix-jumping-scrollbar.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-experience/fix-jumping-scrollbar.html">
                        <i class="fa fa-check"></i>
                        
                            <b>22.1.</b>
                        
                        页面滚动条出现时不跳动
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="22.2" data-path="user-experience/progressive-jpeg.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/user-experience/progressive-jpeg.html">
                        <i class="fa fa-check"></i>
                        
                            <b>22.2.</b>
                        
                        使用渐进式JPEG来提升用户体验
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="23" data-path="animation/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/animation/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>23.</b>
                        
                        动画相关
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="23.1" data-path="animation/animation-type.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/animation/animation-type.html">
                        <i class="fa fa-check"></i>
                        
                            <b>23.1.</b>
                        
                        动画类型
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="23.2" data-path="animation/relative-math.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/animation/relative-math.html">
                        <i class="fa fa-check"></i>
                        
                            <b>23.2.</b>
                        
                        跟动画有关的数学和物理公式
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="23.3" data-path="animation/easing.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/animation/easing.html">
                        <i class="fa fa-check"></i>
                        
                            <b>23.3.</b>
                        
                        缓动原理与实现
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="23.4" data-path="animation/effect-and-easing.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/animation/effect-and-easing.html">
                        <i class="fa fa-check"></i>
                        
                            <b>23.4.</b>
                        
                        常用动画效果与缓动
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="23.5" data-path="animation/animation-svg.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/animation/animation-svg.html">
                        <i class="fa fa-check"></i>
                        
                            <b>23.5.</b>
                        
                        SVG动画
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="24" data-path="theory/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.</b>
                        
                        原理性质
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="24.1" data-path="theory/js-load-and-exec.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/js-load-and-exec.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.1.</b>
                        
                        JavaScript的加载与执行
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.2" data-path="theory/single-thread.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/single-thread.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.2.</b>
                        
                        单线程的Javascript
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.3" data-path="theory/browser-engine.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/browser-engine.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.3.</b>
                        
                        浏览器解析介绍
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.4" data-path="theory/v8.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/v8.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.4.</b>
                        
                        v8引擎
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.5" data-path="theory/browser-work.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/browser-work.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.5.</b>
                        
                        浏览器渲染
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.6" data-path="theory/js-animation-performance.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/js-animation-performance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.6.</b>
                        
                        JS动画性能
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.7" data-path="theory/repaint-and-reflow.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/repaint-and-reflow.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.7.</b>
                        
                        Repaint和Reflow
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.8" data-path="theory/URL-Encoding-Decoding.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/URL-Encoding-Decoding.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.8.</b>
                        
                        URL编码与解码
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.9" data-path="theory/font-rendering.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/font-rendering.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.9.</b>
                        
                        字体的渲染
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="24.10" data-path="theory/img-format.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/theory/img-format.html">
                        <i class="fa fa-check"></i>
                        
                            <b>24.10.</b>
                        
                        图片格式的优缺点
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="25" data-path="preference/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.</b>
                        
                        性能优化
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="25.1" data-path="preference/code-style.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/code-style.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.1.</b>
                        
                        编码规范
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.2" data-path="preference/javascript-best-practise.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/javascript-best-practise.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.2.</b>
                        
                        JavaScript代码最佳实践
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.3" data-path="preference/mobile-h5-performance.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/mobile-h5-performance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.3.</b>
                        
                        移动H5前端性能优化指南
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.4" data-path="preference/browser-rendering-performance.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/browser-rendering-performance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.4.</b>
                        
                        浏览器渲染性能优化
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.5" data-path="preference/develop-and-deploy.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/develop-and-deploy.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.5.</b>
                        
                        开发和部署前端代码
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.6" data-path="preference/optimize-request.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/optimize-request.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.6.</b>
                        
                        优化网络请求
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.7" data-path="preference/optimize-load-speed.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/optimize-load-speed.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.7.</b>
                        
                        页面提速方法
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.8" data-path="preference/chrome-developer-tools.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/chrome-developer-tools.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.8.</b>
                        
                        Chrome开发者工具的使用
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.9" data-path="preference/optimize-javascript.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/optimize-javascript.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.9.</b>
                        
                        JavaScript内存优化
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.10" data-path="preference/optimize-events.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/optimize-events.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.10.</b>
                        
                        javascript事件优化
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.11" data-path="preference/page-scroll-rendering.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/page-scroll-rendering.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.11.</b>
                        
                        页面滚动性能
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="25.12" data-path="preference/canvas-rendering.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/preference/canvas-rendering.html">
                        <i class="fa fa-check"></i>
                        
                            <b>25.12.</b>
                        
                        canvas渲染性能
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="26" data-path="problems-in-develop-webapp/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.</b>
                        
                        web开发中的坑or技巧
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="26.1" data-path="problems-in-develop-webapp/layout-compatibility.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/layout-compatibility.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.1.</b>
                        
                        排版兼容性问题
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.2" data-path="problems-in-develop-webapp/errors-in-browser.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/errors-in-browser.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.2.</b>
                        
                        浏览器报错
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.3" data-path="problems-in-develop-webapp/bugs-in-ipad.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/bugs-in-ipad.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.3.</b>
                        
                        iPad的bug合集
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.4" data-path="problems-in-develop-webapp/addEventListener-and-handleEvent.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/addEventListener-and-handleEvent.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.4.</b>
                        
                        addEventListener与handleEvent关系
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.5" data-path="problems-in-develop-webapp/localStorage.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/localStorage.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.5.</b>
                        
                        localStorage的使用
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.6" data-path="problems-in-develop-webapp/web-position-fixed.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/web-position-fixed.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.6.</b>
                        
                        移动端fixed布局
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.7" data-path="problems-in-develop-webapp/event-touch.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/event-touch.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.7.</b>
                        
                        touch事件
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.8" data-path="problems-in-develop-webapp/handle-browser-input.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/handle-browser-input.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.8.</b>
                        
                        处理输入事件
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.9" data-path="problems-in-develop-webapp/touch-and-mouse.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/touch-and-mouse.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.9.</b>
                        
                        触摸和鼠标在一起
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.10" data-path="problems-in-develop-webapp/delay-fire-event.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/delay-fire-event.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.10.</b>
                        
                        如何延时触发事件
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.11" data-path="problems-in-develop-webapp/operate-array.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/operate-array.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.11.</b>
                        
                        数组的操作
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.12" data-path="problems-in-develop-webapp/operate-object.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/operate-object.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.12.</b>
                        
                        对象的操作
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.13" data-path="problems-in-develop-webapp/detect-orientation-change-on-mobile.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/detect-orientation-change-on-mobile.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.13.</b>
                        
                        mobile设备的横竖屏切换检测
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.14" data-path="problems-in-develop-webapp/generate-random.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/generate-random.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.14.</b>
                        
                        生成随机数字
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.15" data-path="problems-in-develop-webapp/problem-with-settimeout.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/problem-with-settimeout.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.15.</b>
                        
                        setTimeout的误区
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="26.16" data-path="problems-in-develop-webapp/useful-api.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/problems-in-develop-webapp/useful-api.html">
                        <i class="fa fa-check"></i>
                        
                            <b>26.16.</b>
                        
                        好用的原生API操作
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="27" data-path="interview/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.</b>
                        
                        前端面试
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="27.1" data-path="interview/skill-path.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/skill-path.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.1.</b>
                        
                        前端技能图谱
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="27.2" data-path="interview/the-key-of-frontend-knowledge.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/the-key-of-frontend-knowledge.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.2.</b>
                        
                        前端知识点
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="27.3" data-path="interview/interview-principle-and-skill.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/interview-principle-and-skill.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.3.</b>
                        
                        原则与技巧
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="27.4" data-path="interview/interview-exercises-with-html-and-css.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/interview-exercises-with-html-and-css.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.4.</b>
                        
                        html/css面试题
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="27.5" data-path="interview/interview-exercises-with-JavaScript.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/interview-exercises-with-JavaScript.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.5.</b>
                        
                        JavaScript面试题
                    </a>
                
            
            
        </li>
    
        <li class="chapter  done" data-level="27.6" data-path="interview/interview-exercises-with-jquery.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/interview-exercises-with-jquery.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.6.</b>
                        
                        jQuery面试题
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="27.7" data-path="interview/interview-exercises-with-network.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/interview-exercises-with-network.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.7.</b>
                        
                        网络相关面试题
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="27.8" data-path="interview/interview-exercises.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/interview/interview-exercises.html">
                        <i class="fa fa-check"></i>
                        
                            <b>27.8.</b>
                        
                        面试题集合
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter" data-level="28" data-path="appendix/index.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/index.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.</b>
                        
                        参考资料
                    </a>
                
            
            
            <ul class="articles">
                
    
        <li class="chapter" data-level="28.1" data-path="appendix/ebooks.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/ebooks.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.1.</b>
                        
                        图书资料
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="28.2" data-path="appendix/videos.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/videos.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.2.</b>
                        
                        视频教程
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="28.3" data-path="appendix/design.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/design.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.3.</b>
                        
                        设计方向
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="28.4" data-path="appendix/js-library.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/js-library.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.4.</b>
                        
                        JS库
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="28.5" data-path="appendix/css-library.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/css-library.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.5.</b>
                        
                        CSS相关库
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="28.6" data-path="appendix/bootstrap.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/bootstrap.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.6.</b>
                        
                        Bootstrap资料
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="28.7" data-path="appendix/mobile-library.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/mobile-library.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.7.</b>
                        
                        移动开发框架
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="28.8" data-path="appendix/animation-loading.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/animation-loading.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.8.</b>
                        
                        Loading动画
                    </a>
                
            
            
        </li>
    
        <li class="chapter" data-level="28.9" data-path="appendix/tools.html">
            
                
                    <a href="https://leohxj.gitbooks.io/front-end-database/content/appendix/tools.html">
                        <i class="fa fa-check"></i>
                        
                            <b>28.9.</b>
                        
                        辅助工具
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="https://www.gitbook.com/" target="blank" class="gitbook-link">
                本書使用 GitBook 釋出
            </a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html#" class="btn pull-left toggle-summary" aria-label="目錄"><i class="fa fa-align-justify"></i></a>
    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html#" class="btn pull-left toggle-search" aria-label="搜尋"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html#" class="btn toggle-dropdown" aria-label="字型設定"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">襯線體</button>
        <button type="button" data-font="1" class="button">無襯線體</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">白色</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">棕褐色</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">夜間</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html#" class="btn toggle-dropdown" aria-label="分享"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">
                    分享到 Twitter
                </button>
                <button type="button" data-sharing="google-plus" class="button">
                    分享到 Google
                </button>
                <button type="button" data-sharing="facebook" class="button">
                    分享到 Facebook
                </button>
                <button type="button" data-sharing="weibo" class="button">
                    分享到 Weibo
                </button>
                <button type="button" data-sharing="instapaper" class="button">
                    分享到 Instapaper
                </button>
            </div>
        </div>
    </div>
    

    
    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Google"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-position.html#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
    
    
    


    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="https://leohxj.gitbooks.io/front-end-database/content/">前端工程师手册</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-">
                    
                        <h1 id="css%E5%AE%9A%E4%BD%8D%E6%96%B9%E5%BC%8F">CSS定位方式</h1>
<h2 id="display%E5%B1%9E%E6%80%A7">display属性</h2>
<p>每一个元素都有默认的display属性，使用最多的是<code>block</code>, <code>inline</code>和<code>inline-block</code>，不常用的是<code>table-cell</code>。</p>
<p>根据display属性，我们可以将元素分为块级元素(block)和内联级元素(inline)。它们最大区别是:<code>block</code>元素可以设置宽度，独占一行。<code>inline</code>元素宽度由内容决定，与其他元素并列在一行。</p>
<p>常见的block属性元素有：<code>div, h1-h6, ul, li, ol, dl, dd, dt</code>。</p>
<p>常见的inline属性元素有: <code>span, a, em</code>。</p>
<h3 id="block">block</h3>
<p>宽高可以自行设置，默认宽度由父容器决定，默认高度有内容决定。自己独占一行。</p>
<h3 id="inline">inline</h3>
<p>宽度和高度都有内容决定，与其他元素共占一行。</p>
<h3 id="inline-block">inline-block</h3>
<p>宽度可以自行设置，类似block，但是与其他元素共占一行，类似inline。长用于设置垂直居中。</p>
<h3 id="table-cell">table-cell</h3>
<p>此属性指让标签元素以表格单元格的形式呈现，单元格有一些比较特殊的属性，可以设置元素的垂直居中等。</p>
<h2 id="position%E5%B1%9E%E6%80%A7">position属性</h2>
<p>元素在页面中的布局遵守一套文档流的方式，默认的定位属性值为<code>static</code>。它其实是未被设置定位的。</p>
<p>元素如果被定位了，那么它的<code>top,left,bottom,right</code>值就会生效，能设置定位的属性是<code>relative</code>,<code>absolute</code>和<code>fixed</code>。</p>
<p>需要注意的另一点是被定位的元素层次(<code>z-index</code>)会得到提高。</p>
<h2 id="relative%EF%BC%88%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D%EF%BC%89">relative（相对定位）</h2>
<p>设置了相对定位之后，通过修改<code>top,left,bottom,right</code>值，元素会在自身文档流所在位置上被移动，其他的元素则不会调整位置来弥补它偏离后剩下的空隙。</p>
<h2 id="absolute%EF%BC%88%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%EF%BC%89">absolute（绝对定位）</h2>
<p>设置了绝对定位之后，元素脱离文档流，其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性（<code>position</code>值不为static）的元素。</p>
<p>且如果元素为块级元素（<code>display</code>属性值为<code>block</code>)，那么它的宽度也会由内容撑开。因为：</p>
<blockquote>
<p>  默认文档流中块级元素如果没有设置宽度属性，会自动填满整行。</p>
</blockquote>
<h2 id="fixed-%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D">fixed(固定定位)</h2>
<p>设置了固定定位之后，元素相对的偏移的参考是可视窗口，即使页面滚动，元素仍然会在固定位置。</p>
<h2 id="%E5%8F%82%E8%80%83%E8%B5%84%E6%96%99">参考资料</h2>
<ul>
<li><a href="http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%B8%80%EF%BC%89/" target="_blank">CSS 相对|绝对(relative/absolute)定位系列（一）</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsolute%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%BA%8C%EF%BC%89/" target="_blank">CSS 相对/绝对(relative/absolute)定位系列（二）</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/2011/03/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9relativeabsolute%E5%AE%9A%E4%BD%8D%E7%B3%BB%E5%88%97%EF%BC%88%E4%B8%89%EF%BC%89/" target="_blank">CSS 相对/绝对(relative/absolute)定位系列（三）</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/2011/08/css%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8Drelative%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8Dabsolute%E7%B3%BB%E5%88%97%EF%BC%88%E5%9B%9B%EF%BC%89/" target="_blank">CSS 相对/绝对(relative/absolute)定位系列（四）</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/2011/08/css%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%BA%94%E4%B9%8Bz-index%E7%AF%87/" target="_blank">CSS相对定位|绝对定位(五)之z-index篇</a></li>
<li><a href="http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E7%A7%8Ddisplaytable-cell%E7%9A%84%E5%BA%94%E7%94%A8/" target="_blank">displaytable-cell的应用</a></li>
<li><a href="http://www.ituring.com.cn/minibook/1024" target="_blank">margin系列详析</a></li>
</ul>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-normal-flow.html" class="navigation navigation-prev " aria-label="Previous page: CSS普通流（文档流）"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="https://leohxj.gitbooks.io/front-end-database/content/html-and-css-basic/css-float.html" class="navigation navigation-next " aria-label="Next page: CSS浮动相关" style="margin-right: 0px;"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script async="" src="https://www.google-analytics.com/analytics.js"></script><script src="./CSS定位方式_files/app.js"></script>

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    
<div><script style="display: none;" type="application/javascript">
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-57505611-7', 'auto', {name: 'microcdn'});
  ga('microcdn.send', 'pageview');

  var _cdn_prev_loc = window.location.pathname;
  window.setInterval(function () {
    if (window.location.pathname !== _cdn_prev_loc) {
      _cdn_prev_loc = window.location.pathname;
      ga('microcdn.send', 'pageview');
    }
  }, 100);

</script></div>

    

</body></html>